<template>
  <div>
    <h1>Login</h1>
    <p>{{ count }}</p>
    <button @click="count++">累加</button>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      count: 0,
    };
  },
  mounted() {
    console.log(this);
  },
  //路由组件内守卫:进入时
  //注意:这个守卫执行的时候,实例还没有产生,所以内部获取不到this
  //独一无二,在这个守卫的next方法接受一个回调函数作为参数,而不是接受一个to作为参数
  //当调用next方法之后,说明我们要放行,那么当前组件的组件实例就可以产生了,在这个回调函数内部就可以访问到this了
  beforeRouteEnter(to, from, next) {
    console.log(to, from, next);
    console.log("路由内进入时守卫");
    console.log(this); //undefined
    next(() => {
      console.log(this);
    });
  },
  
  beforeRouteUpdate(to, from, next) {
    console.log(to, from, next, "beforeRouteUpdate");
    console.log("组件内更新时");
  },
};
</script>

<style></style>
